<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="chart-sales">
            <div class="sales-title">
                <span class="tip"></span>
                <span>最近30天销售趋势</span>
            </div>
            <div class='chart-trend'>
                <trendChart height='100%' width='100%'/>
            </div>
        </div>
        <div class="switch-time">
            <span class="label-time">切换日期</span>
            <el-date-picker
                v-model="date"
                :editable='false'
                :clearable='false'
                type="month"
                :picker-options="pickerOptions1"
                placeholder="请选择">
            </el-date-picker>
            <el-button type="primary" class="btn-switch" @click="switchMonth">切换</el-button>
        </div>
        <div class="total-sales">
            <div class="sales-title">
                <span class="tip"></span>
                <!-- <span class="current-time">{{currentMonth}}</span> -->
                <span>月销售总额</span>
            </div>
            <div class="current-month" v-loading='loading'>
                <div class="current-item">
                    <div class="title">月订单量（条）</div>
                    <div class="data">{{totalNum}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">月销售总额（元）</div>
                    <div class="data">{{totalMoney}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">经销商分成总额（元）</div>
                    <div class="data">{{dividedMoney}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">e学云分成总额（元）</div>
                    <div class="data">{{orgMoney}}</div> 
                </div>
            </div>
        </div>
        <div class="table-list">
            <div class="sales-title">
                <span class="tip"></span>
                <span>月销售详细</span>
            </div>
            <TableLayoutes form-title="">  
                <el-table :data="tableData" border  style="width: 100%" v-loading='loading'>                     
                    <el-table-column label="服务名称" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sIncrementName  | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="月订单量（条）" align="center">
                        <template scope="scope">
                            <span>{{scope.row.totalNum  | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="月销售额（元）" align="center">
                        <template scope="scope">
                            <span>{{scope.row.totalMoney  | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="同比增长" align="center">
                         <template scope="scope">
                            <span>{{scope.row.growth  | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </TableLayoutes>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../layout/Levelbar';
    import trendChart from './comps/trendChart';
    import TableLayoutes from 'components/TableLayoutes';
    import { getStatisticsList} from 'api/serviceManage';
    export default{
        name: 'orderStatistics',
        components: {Levelbar, trendChart, TableLayoutes},
        data() {
            return {
                loading: false,
                date: new Date(),
                currentMonth: moment(new Date()).format('YYYY年MM月'),
                dividedMoney: '',
                orgMoney: '',
                totalMoney: '',
                totalNum: '',
                tableData: [],
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        computed: {
        },
        created() {
            this.getTableData();
        },
        methods: {
            getTableData() {
                
                let date = this.date!=''?moment(this.date).format('YYYY-MM'):'';
                this.loading = true;
                getStatisticsList(date).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.details;
                    this.dividedMoney = res.data.content.statistics.dividedMoney;
                    this.orgMoney = res.data.content.statistics.orgMoney;
                    this.totalMoney = res.data.content.statistics.totalMoney;
                    this.totalNum = res.data.content.statistics.totalNum;
                }).catch(() => {
                    this.loading = false;
                });

            },
            switchMonth() {
                this.currentMonth = moment(this.date).format('YYYY年MM月');
                this.getTableData();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        @mixin box-item() {
            overflow: hidden;
            background: $bgcolor;
            box-shadow: 0px 1px 2px #999;
            -webkit-box-shadow: 0px 1px 2px #999;
            color: #333;
            font-size: 14px;
            padding: 20px 20px;
        }   
        @mixin tip-css {
            display:inline-block;
            height: 12px;
            width: 6px;
            border-left: 3px solid #ff5e2c;
            padding-left: 15px;
        }
        .switch-time {
            @include box-item();
            margin-top: 15px;
            .label-time {
                padding-right: 6px;
            }
            .btn-switch {
                float: right;
            }
        }
        .total-sales {
            @include box-item();
            margin-top: 15px;
            .sales-title {
                .tip {
                    @include tip-css();
                }
                .current-time {
                    padding-right: 8px;
                }
            }
            .current-month {
                display: flex;
                justify-content: space-between;
                padding: 20px;
                padding-top: 40px;
                .current-item {
                    .title {
                        font-size: 16px;
                        color: #aaa;
                        width: 50px;
                        padding-bottom: 30px;
                        width: 160px;
                        text-align: center;
                    }
                    .data {
                        font-size: 26px;
                        color: #333;
                        text-align: center;
                        width: 160px;
                    }
                }
            }
        }
        .chart-sales {
            @include box-item();
            .sales-title {
                .tip {
                    @include tip-css();
                }
            }
            .chart-trend {
                position: relative;
                width: 100%;
                height: 350px;
            }
        }
        .table-list {
            @include box-item();
            margin-top: 15px;
            .sales-title {
                .tip {
                    @include tip-css();
                }
            }
        }
    }
</style>                     